<template>
<div class="adoptedDetailsBatch">
  <el-form :model="model" label-width="100px" class="model1">
    <el-form-item prop="sku" label="物品规格:" class="is-required">
      <sem-adopt-coupon-select
        :selected="model.sku"
        :adopt-cate="adoptCate"
        @add="addBiz"
        @remove="delBiz"></sem-adopt-coupon-select>
    </el-form-item>
    <el-form-item prop="name" label="录入类型:" class="is-required">
      <el-select v-model="model.type" @change="resetModel">
        <el-option label="动态" value="1"></el-option>
        <el-option label="指标" value="2"></el-option>
        <el-option label="相册" value="3"></el-option>
        <el-option label="视频" value="4"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <el-form v-if="!!model.type" :model="curModel" label-width="100px" class="model2" :rules="curRules" ref="form">
    <template v-if="model.type === '1'">
      <el-form-item prop="trendsDescription" label="动态描述:">
        <el-input type="textarea" :autosize="{minRows: 3}" v-model="curModel.trendsDescription" :maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item prop="trendsType" label="动态类型:">
        <y-code-select
          v-model="curModel.trendsType"
          dict="adopted_trends_type"
          disabled-value='trends_zy'></y-code-select>
      </el-form-item>
      <el-form-item prop="trendsDate" label="动态日期:">
        <el-date-picker
          v-model="curModel.trendsDate"
          value-format='yyyy-MM-dd'
          :picker-options="{
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }]
          }"></el-date-picker>
      </el-form-item>
    </template>
    <template v-if="model.type === '2'">
      <el-form-item prop="indexType" label="指标类型:">
        <y-code-select
          v-model="curModel.indexType"
          dict="adopted_index_type"></y-code-select>
      </el-form-item>
      <el-form-item prop="indexValue" label="指标值:">
        <el-input-number v-model="curModel.indexValue" :controls="false" :min="0" :step="0.01" step-strictly></el-input-number>
      </el-form-item>
      <el-form-item prop="indexDate" label="指标日期:">
        <el-date-picker
          v-model="curModel.indexDate"
          value-format='yyyy-MM-dd'
          :picker-options="{
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        }"></el-date-picker>
      </el-form-item>
    </template>
    <template v-if="model.type === '3'">
      <el-form-item prop="totalUrl" label="图片:">
        <y-upload-img
          :url="curModel.totalUrl ? [{
            url: curModel.totalUrl,
            id: curModel.attachmentId
          }] : []"
          value-type="ObjectArray"
          @update="updateImgModel"
          re-upload
          business-sys-module-code="ADOPTED_DETAIL_ALBUM"
          :limit="1"
          :cropper-options="{
            fixedNumber: [1, 1],
            centerBox: false
          }">
        </y-upload-img>
      </el-form-item>
      <el-form-item prop="albumOrder" label="排序:">
        <el-input-number v-model="curModel.albumOrder" step-strictly></el-input-number>
      </el-form-item>
    </template>
    <template v-if="model.type === '4'">
      <el-form-item prop="totalUrl" label="视频:">
        <y-upload-video-single
          :model="{
            videoAttachmentId: this.curModel.attachmentId,
            videoName: '',
            videoUrl: this.curModel.totalUrl
          }"
          business-sys-module-code="ADOPTED_DETAIL_ALBUM"
          show-delete
          :custom-style="{
            display: 'inline-block'
          }"
          @updateExactly="updateVideoModel"></y-upload-video-single>
      </el-form-item>
      <el-form-item prop="albumOrder" label="排序:">
        <el-input-number v-model="curModel.albumOrder" step-strictly></el-input-number>
      </el-form-item>
    </template>
  </el-form>
  <div class="buttons">
    <el-button size="mini" type="primary" :disabled="!model.sku.length || !model.type" @click="save">保存</el-button>
  </div>
</div>
</template>

<script>
import SemAdoptCouponSelect from "@/views/sem/semCouponItem/semAdoptCouponSelect";
export default {
  name: "adoptedDetailsBatch",
  components: { SemAdoptCouponSelect },
  computed:{
    curModel(){
      return this.model.type ? this.certainModels[this.model.type - 1] : {}
    },
    curRules(){
      return this.model.type ? this.certainRules[this.model.type - 1] : {}
    }
  },
  data(){
    return{
      model:{
        sku: [],
        type: '',
      },
      adoptCate: [],
      certainModels:[{
        trendsDescription: '',
        trendsDate: '',
        trendsType: ''
      },{
        indexType: '',
        indexValue: '',
        indexDate: ''
      },{
        attachmentId: '',
        totalUrl: '',
        albumOrder: ''
      },{
        attachmentId: '',
        totalUrl: '',
        albumOrder: ''
      }],
      certainRules: [{
        trendsDescription: [{required: true, message: "请输入动态描述", trigger: "blur"}],
        trendsDate: [{required: true, message: "请选择动态日期", trigger: "change"}],
        trendsType: [{required: true, message: "请选择动态类型", trigger: "change"}],
      },{
        indexType: [{required: true, message: "请选择指标类型", trigger: "change"}],
        indexValue: [{required: true, message: "请输入指标值", trigger: "blur"}],
        indexDate: [{required: true, message: "请选择指标日期", trigger: "change"}]
      },{
        totalUrl: [{required: true, message: "请选择图片", trigger: "change"}]
      },{
        totalUrl: [{required: true, message: "请选择视频", trigger: "change"}]
      }]
    }
  },
  mounted(){
    this.$yAxios({
      url: this.$api.adopt.queryAdoptCategory,
    }, info => {
      this.adoptCate = info.filter(item => !!item.children);
    })
  },
  methods:{
    resetModel(val){
      if(val){
        this.certainModels.map(model => {
          Object.keys(model).map(key => {
            model[key] = '';
          });
        })
        this.$nextTick(() => {
          this.$refs['form'] && this.$refs['form'].clearValidate();
        })
      }
    },
    updateImgModel({type, file}){
      switch(type) {
        case 'delete': {
          this.curModel.attachmentId = '';
          this.curModel.totalUrl = '';
          break;
        }
        case 'edit': case 'add':{
          this.curModel.attachmentId = file.id;
          this.curModel.totalUrl = file.name;
          this.$refs['form'].validate();
          break;
        }
      }
    },
    updateVideoModel({type, file}){
      switch(type) {
        case 'delete': {
          this.curModel.attachmentId = '';
          this.curModel.totalUrl = '';
          break;
        }
        case 'add':{
          this.curModel.attachmentId = file.videoAttachmentId;
          this.curModel.totalUrl = file.videoUrl;
          this.$refs['form'].validate();
          break;
        }
      }
    },
    addBiz({value, rootName, skuName}){
      this.model.sku.push(value);
      this.model.sku.sort();
    },
    delBiz({value}){
      let delIndex = this.model.sku.indexOf(value);
      if(delIndex >= 0){
        this.$delete(this.model.sku, delIndex);
      }
    },
    save(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          const keys = ['detailTrends', 'detailIndex', 'adoptPicAlbum', 'adoptVideoAlbum']
          let param = {};
          param.skus = this.model.sku.map(key => key.split('/')[1]);
          param[keys[this.model.type - 1]] = this.curModel;
          this.$yAxios({
            url: this.$api.adopted.saveAdoptedDetailBatch,
            data: param,
            loading: true
          }, info => {
            this.$message({
              type: 'success',
              message: '批量导入成功'
            });
            this.resetModel(this.model.type);
            this.model.type = '';
          })
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
.adoptedDetailsBatch{
  height: 100%;
  padding: 20px 20px 0;
  position: relative;
  overflow-y: auto;
  >.buttons{
    text-align: center;
    height: 40px;
    position: sticky;
    background: #fff;
    z-index: 1;
    bottom: 0;
    width: 100%;
    >.el-button{
      min-width: 104px;
    }
  }
}
</style>